<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-search"
          size="mini"
          @click="openSearch = true"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="() => handleAdd(tableData)"
          v-hasPermi="['project:process:add']"
        >
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          v-hasPermi="['project:process:remove']"
        >
          删除
        </el-button>
      </el-col>
    </el-row>

    <el-table
      highlight-current-row
      border
      stripe
      ref="multipleTable"
      v-loading="tableData.loading"
      :data="tableData.rows"
      @row-click="getListChild"
      @selection-change="handleSelectionChange"
      id="tabMain"
      @scrollBottom="load"
      height="calc(50% - 100px)"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column fixed type="selection" width="55" align="center" />
      <el-table-column
        label="单据编号"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="processBillCode"
      />
      <el-table-column
        label="物料代码"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="processMaterialCode"
      />
      <el-table-column
        label="品名规格"
        align="center"
        :show-overflow-tooltip="true"
        prop="itmPmgg"
      ></el-table-column>
      <el-table-column
        label="客户编码"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="customerCode"
      ></el-table-column>
      <el-table-column
        label="机种代码"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="machineCode"
      ></el-table-column>
      <el-table-column
        label="建立人员"
        width="150"
        align="center"
        prop="createBy"
      ></el-table-column>
      <el-table-column
        label="建立日期"
        width="150"
        align="center"
        prop="createTime"
      ></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="160"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAddChild(scope.row)"
            v-hasPermi="['project:process:add']"
          >
            新增工序
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table
      highlight-current-row
      border
      stripe
      v-loading="tableDataChild.load"
      :data="tableDataChild.rows"
      height="calc(50% - 50px)"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column label="#" width="40" type="index" align="center" />
      <el-table-column
        label="序号"
        width="150"
        :show-overflow-tooltip="true"
        align="center"
        prop="processNo"
      />
      <el-table-column
        label="工序编号"
        :show-overflow-tooltip="true"
        align="center"
        prop="processCustomerCode"
      ></el-table-column>
      <el-table-column
        label="模具编号"
        :show-overflow-tooltip="true"
        align="center"
        prop="processMouldCode"
      ></el-table-column>
      <el-table-column
        label="备选模具"
        :show-overflow-tooltip="true"
        align="center"
        prop="processMouldCodeBackup"
      ></el-table-column>
      <el-table-column label="操作" width="220" align="center">
        <template #default="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAddChild()"
            v-hasPermi="['project:process:add']"
            >插入工序</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEditChild(scope.row)"
            v-hasPermi="['project:process:edit']"
          >
            修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleteChild(scope.row)"
            v-hasPermi="['project:process:delete']"
          >
            删除工序
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查询对话框   -->
    <el-dialog
      title="查询"
      v-model="openSearch"
      :close-on-click-modal="false"
      draggable
      width="650px"
      append-to-body
    >
      <el-form :model="queryParams" ref="queryForm" label-width="75px">
        <!-- <el-col :span="12">
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              clearable
              style="width: 100%"></el-date-picker>
          </el-form-item>
        </el-col> -->
        <el-col :span="24">
          <el-form-item label="品名规格" prop="itmPmgg">
            <el-input v-model="queryParams.itmPmgg" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="机种代码" prop="machineCode" style="width: 100%">
            <el-select v-model="queryParams.machineCode" filterable clearable>
              <el-option
                v-for="item in machineCode"
                :key="item"
                :value="item"
                >{{ item }}</el-option
              >
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物料代码" prop="processMaterialCode">
            <HdSelectMaterial
              v-model="queryParams.processMaterialCode"
              placeholder="请输入物料代码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户编码" prop="customerCode">
            <el-input v-model="queryParams.customerCode" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            style="margin-top: 25px; display: flex; justify-content: flex-end"
          >
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="handleQuery">确认</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-dialog>
    <!-- 添加或修改物料对话框 -->
    <el-dialog
      :title="tableData.title"
      v-model="tableData.open"
      :close-on-click-modal="false"
      draggable
      width="500px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="tableData.form"
        :rules="tableData.rules"
        label-width="80px"
      >
        <el-form-item label="单据编号" prop="processBillCode">
          <el-input v-model="tableData.form.processBillCode" disabled />
        </el-form-item>
        <el-form-item label="物料代码" prop="processMaterialCode">
          <HdSelectMaterial
            v-model="tableData.form.processMaterialCode"
            placeholder="请输入物料代码"
            @change="changeZxpm"
          />
        </el-form-item>
        <el-form-item label="品名规格" prop="itmPmgg">
          <HdSelectMaterial
            v-model="tableData.form.itmPmgg"
            placeholder="请输入品名规格"
            @change="changeZxpm"
            keyName="itmPmgg"
          />
        </el-form-item>
        <el-form-item label="客户编码" prop="customerCode">
          <el-input v-model="tableData.form.customerCode" disabled />
        </el-form-item>
        <el-form-item label="机种代码" prop="machineCode">
          <el-input v-model="tableData.form.machineCode" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDiag(tableData)">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加或修改工序父对话框 -->
    <el-dialog
      :title="tableDataChild.title"
      v-model="tableDataChild.open"
      :close-on-click-modal="false"
      draggable
      width="500px"
      append-to-body
    >
      <el-form
        ref="formChild"
        :model="tableDataChild.form"
        :rules="tableDataChild.rules"
        label-width="80px"
      >
        <el-form-item label="序号" prop="processNo">
          <el-input-number
            v-model="tableDataChild.form.processNo"
            :disabled="disableNo"
            :step="10"
            :min="10"
          />
        </el-form-item>
        <el-form-item label="客户编码" prop="processCustomerCode">
          <el-input
            v-model="tableDataChild.form.processCustomerCode"
            disabled
          />
        </el-form-item>
        <el-form-item label="模具编号" prop="processMouldCode">
          <HdSelectMould v-model="tableDataChild.form.processMouldCode" />
          <!-- <el-input v-model="tableDataChild.form.processMouldCode" /> -->
        </el-form-item>
        <el-form-item label="备选模具" prop="processMouldCodeBackup">
          <HdSelectMould
            multiple
            v-model="tableDataChild.form.processMouldCodeBackup"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDiag(tableDataChild)">取 消</el-button>
        <el-button type="primary" @click="submitFormChild">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ProcessService from "@/api/project/process";
import HdSelectMould from "@/components/HdSelectMould";
export default {
  name: "Process",
  components: { HdSelectMould },
  data() {
    return {
      // 遮罩层
      exportLoading: false,
      openSearch: false,
      tableData: {
        rows: [],
        loading: true,
        total: 0,
        selection: [],
        title: "物料信息",
        open: false,
        form: {
          processId: null,
          processBillCode: null,
          processMaterialCode: null,
          customerCode: null,
          machineCode: undefined,
        },
        rules: {
          processMaterialCode: [
            { required: true, message: "请选择物料", trigger: "blur" },
          ],
        },
      },
      tableDataChild: {
        rows: [],
        loading: true,
        total: 0,
        title: "工序",
        open: false,
        form: {},
        rules: {
          processNo: [
            { required: true, message: "请输入序号", trigger: "blur" },
          ],
          processMouldCode: [
            { required: true, message: "请选择模具", trigger: "blur" },
          ],
        },
      },
      // 建立日期时间范围
      dateRange: [
        this.$moment().startOf("month").toDate(),
        this.$moment().endOf("month").toDate(),
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 40,
        customerCode: undefined,
        processMaterialCode: undefined,
        itmPmgg: undefined,
        params: {
          beginDate: this.$moment().startOf("month").format(),
          endDate: this.$moment().endOf("month").format(),
        },
      },
      disableNo: false,
      machineCode: [],
    };
  },
  created() {
    ProcessService.queryMachineCode().then((res) => {
      this.machineCode = res.data;
    });
    this.getList();
  },
  watch: {
    dateRange(val, old) {
      if (val && val[1]) {
        this.queryParams.params.beginDate = val[0];
        this.queryParams.params.endDate = val[1];
      } else {
        this.queryParams.params = {};
      }
    },
  },
  methods: {
    /** 查询来料入库批退率列表 */
    getList() {
      this.tableData.loading = true;
      this.queryParams.pageNum = 1;
      ProcessService.getList(this.queryParams).then((response) => {
        this.tableData.rows = response.rows;
        this.tableData.total = response.total;
        this.tableData.loading = false;
        this.tableData.form = {};
        this.getListChild(this.tableData.rows[0]);
      });
    },
    getListChild(row) {
      //点击行触发，选中或不选中复选框
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(row);

      row = row || this.tableData.form;
      this.tableData.form = Object.assign({}, row);
      this.tableDataChild.loading = true;
      if (row && row.processBillCode) {
        ProcessService.getListChild(row.processBillCode).then((response) => {
          this.tableDataChild.rows = response.data;
          this.tableDataChild.loading = false;
          this.tableDataChild.form.processNo = this.tableDataChild.rows[0]
            ? this.tableDataChild.rows[this.tableDataChild.rows.length - 1]
                .processNo + 10
            : 10;
        });
      } else {
        this.tableDataChild.rows = [];
      }
    },
    //load
    load() {
      if (
        this.queryParams.pageNum <
        Math.ceil(this.tableData.total / this.queryParams.pageSize)
      ) {
        this.queryParams.pageNum++;
        ProcessService.getList(this.queryParams).then((response) => {
          this.tableData.rows = this.tableData.rows.concat(response.rows);
          this.tableData.total = response.total;
          this.tableData.loading = false;
        });
      }
      return 0;
    },
    // 取消按钮
    cancel() {
      this.openSearch = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
      this.openSearch = false;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = this.tableData.selection.map((item) => item.processId);
      this.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return ProcessService.delete(ids);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.tableData.selection = selection;
    },
    /** 新增按钮操作 */
    handleAdd(data) {
      this.reset();
      data.open = true;
      data.title = "添加";
    },
    /** 新增按钮操作 */
    handleAddChild(row) {
      this.resetChild();
      if (row) {
        this.tableData.form = Object.assign({}, row);
        this.disableNo = true;
      } else this.disableNo = false;
      this.tableDataChild.open = true;
      this.tableDataChild.title = "添加工序";
      this.tableDataChild.form.processBillCode =
        this.tableData.form.processBillCode;
    },
    handleEditChild(data) {
      this.tableDataChild.open = true;
      this.tableDataChild.form = Object.assign({}, data);
      this.tableDataChild.title = "编辑工序";
    },
    handleDeleteChild(data) {
      this.$confirm("是否确认删除选中的数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return ProcessService.deleteChild(data.processChildId);
        })
        .then(() => {
          this.getListChild();
          this.msgSuccess("删除成功");
        });
    },
    // 取消按钮
    cancelDiag(data) {
      data.open = false;
      //this.reset()
    },
    // 表单重置
    reset() {
      this.tableData.form = {
        processId: null,
        processBillCode: null,
        processMaterialCode: null,
        customerCode: null,
        machineCode: undefined,
      };
      this.resetForm("form");
    },
    resetChild() {
      this.tableDataChild.form = {
        processId: null,
        processBillCode: null,
        processMaterialCode: null,
        customerCode: null,
        machineCode: undefined,
      };
      this.resetForm("formChild");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          ProcessService.save(this.tableData.form).then((response) => {
            this.msgSuccess("新增成功");
            this.tableData.open = false;
            this.getList();
          });
        }
      });
    },
    /** 提交字表按钮 */
    submitFormChild() {
      let backup = this.tableDataChild.form.processMouldCodeBackup;
      if (backup !== undefined && backup.length > 255) {
        this.msgError("请将备选模具控制在255个字符以内！");
        return;
      }
      this.$refs["formChild"].validate((valid) => {
        if (valid) {
          this.tableDataChild.form.processCustomerCode =
            this.tableData.form.customerCode +
            "#" +
            this.tableDataChild.form.processNo;
          ProcessService.addchild(this.tableDataChild.form).then((response) => {
            this.msgSuccess("保存成功");
            this.tableDataChild.open = false;
            this.getListChild();
          });
        }
      });
    },
    changeZxpm(val) {
      this.tableData.form.processMaterialCode = val.itmWldm;
      this.tableData.form.itmPmgg = val.itmPmgg;
      this.tableData.form.customerCode = val.itmCustwldm;
      this.tableData.form.machineCode = val.itmJzdm;
    },
  },
};
</script>

<style lang="scss" scoped></style>
